// import React, { useState } from "react";
// import style from "./index.module.scss";
// import axios from "../../http/axios";
// interface AppState {
//   userMessage: string;
//   aiResponse: string;
// }
// const Index: React.FC = () => {
//   const [state, setState] = useState<AppState>({
//     userMessage: "",
//     aiResponse: "",
//   });
//   /**
//    * 处理用户消息输入框变化的事件
//    *
//    * @param e React ChangeEvent 对象，表示输入元素的变化事件
//    */
//   const handleUserMessageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//     setState({ ...state, userMessage: e.target.value });
//     console.log(state.userMessage);
//   };
//   const sendMessage = () => {
//     //后台是 ctx.request.body接收
//     const res = axios.post("/api/char", {
//       question: state.userMessage,
//     });
//     res.then((res) => {
//       console.log(res);
//       setState({ ...state, aiResponse: res.data.data.answer });
//       console.log(state.aiResponse);
//     })
//     .catch((err) => {
//       console.log(err);
//     });
//     setState({ ...state, userMessage: "" });
//   };
//   return (
//     <div className={style.App}>
//       <div className={style.app}>
//         <input
//           type="text"
//           placeholder="给网站客服留言"
//           value={state.userMessage}
//           onChange={handleUserMessageChange}
//         />
//         <button onClick={sendMessage}>发送</button>
//       </div>
//       <div className={style.right}>
//         <div>用户消息：</div>
//         <p>{state.userMessage}</p>
//       </div>
//       <div className={style.left}>
//         <div>小牛客服</div>
//         <p>{state.aiResponse}</p>
//       </div>
//     </div>
//   );
// };
// export default Index;
import React, { useState } from "react";
import style from "./index.module.scss"; // 假设您使用的是CSS模块
import axios from "../../http/axios";

interface Message {
  sender: "user" | "ai";
  content: string;
}

const ChatComponent: React.FC = () => {
  const [userMessage, setUserMessage] = useState("");
  const [messages, setMessages] = useState<Message[]>([]);

  const handleUserMessageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserMessage(e.target.value);
  };
  const sendMessage = () => {
    // 调接口
    const res = axios.post("/api/char", {
      question: userMessage,
    });
    res.then((response) => {
      console.log(response);
      console.log(userMessage);
      // 一次性添加所有消息
      setMessages([
        ...messages,
        { sender: "user", content: userMessage },
        { sender: "ai", content: response.data.data.answer },        
      ]);
    });
  };

  return (
    <div className={style.App}>
      <div className={style.app}>
        <input
          type="text"
          placeholder="给网站客服留言"
          value={userMessage}
          onChange={handleUserMessageChange}
        />
        <button onClick={sendMessage}>发送</button>
      </div>
      <div className={style.chatWindow}>
        {messages.map((msg, index) => (
          <div
            key={index}
            className={`message ${
              msg.sender === "user" ? style.userMessage : style.aiMessage
            }`}
          >
            <div className="message-header">
              {msg.sender === "user" ? (
                <img src="../../src/img/user.png" alt="" />
              ) : (
                <div>
                  <img src="../../src/img/xiaoniu.png" alt="" />{" "}
                  <span>小牛客服</span>
                </div>
              )}
            </div>
            <p className="message-content">{msg.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ChatComponent;
function setTimeout(
  arg0: () => { sender: string; content: any },
  arg1: number
): Message {
  throw new Error("Function not implemented.");
}
